<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="d3.js"></script>
  <script>
function makeList() {
    var vs = [ "From East", "to West,", "at Home", "is Best" ];

    d3.select( "body" )
        .append( "ul" ).selectAll( "li" )
        .data(vs).enter()
        .append("li").text( d => d )                                  // <1>
        .on( "click", function () {                                   // <2>
            this.toggleState = !this.toggleState;                     // <3> <4>
            d3.select( this )                                         // <5>
                .transition().duration(2000)                          // <6>
                .style("color", this.toggleState ? "red" : "black" ); // <7>
        } );
}
  </script>
</head>
  
<body onload="makeList()" />
</html>
